<!-- by DouBao -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Element Scroll Distance</title>
    <style>
      #scrollableElement {
        width: 300px;
        height: 200px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }

      #scrollableElement p {
        height: 500px;
      }
    </style>
  </head>

  <body>
    <div id="scrollableElement">
      <p>
        这里是一些用于填充内容的文本，使得元素可以滚动。这里是一些用于填充内容的文本，使得元素可以滚动。这里是一些用于填充内容的文本，使得元素可以滚动。这里是一些用于填充内容的文本，使得元素可以滚动。这里是一些用于填充内容的文本，使得元素可以滚动。这里是一些用于填充内容的文本，使得元素可以滚动。
      </p>
    </div>
    <div id="scrollInfo" style="position: fixed; top: 50%; left: 40%">
      水平滚动距离: 0px<br />
      垂直滚动距离: 0px
    </div>

    <script>
      // 获取可滚动的元素
      const scrollableElement = document.getElementById("scrollableElement");
      // 获取显示滚动信息的元素
      const scrollInfo = document.getElementById("scrollInfo");

      // 监听可滚动元素的滚动事件
      scrollableElement.addEventListener("scroll", function () {
        // 获取水平和垂直方向的滚动距离
        const scrollX = this.scrollLeft;
        const scrollY = this.scrollTop;

        // 更新显示的滚动信息
        scrollInfo.innerHTML = `
                水平滚动距离: ${scrollX}px<br>
                垂直滚动距离: ${scrollY}px
            `;
      });
    </script>
  </body>
</html>
